<template>
    <div class="image-container" @mouseenter="showCaption" @mouseleave="hideCaption" >
        <el-image :src="imageUrl" fit="none" class="main-image" />
        <Transition name="slide-right">
          <div v-show="showSpecText" class="caption">
            <div class="caption-content">
              <div>
                  <img class="hover-image" :src="specImgUrl"/>
              </div>
              <div>
                {{ title }}
              </div>
              <div>
                  {{ specText }}
              </div>
            </div>
          </div>
        </Transition>
    </div>
</template>
<script>
export default {
  name: 'HoverImg',
  props: {
    imageUrl: {
      type: String,
      default: '',
      required: true
    },
    specImgUrl: {
      type: String,
      default: '',
      required: true
    },
    title: {
      type: String,
      default: '',
      required: true
    },
    specText: {
      type: String,
      default: '',
      required: true
    }
  },
  data() {
    return {
      showSpecText: false,
    };
  },
  methods: {
    showCaption() {
      this.showSpecText = true;
    },
    hideCaption() {
      this.showSpecText = false;
    },
  },
}
</script>

<style scoped>
.image-container {
  position: relative;
  display: inline-block;
  cursor: pointer;
  overflow: hidden;
  height: 615.383px;
}

.main-image  {
  width: 100%;
  height: 100%;
  object-position: top;
  object-fit: none;
  box-sizing: border-box;
}


.hover-image{
  width: 112.45px;
  height: 112.45px;
}

.caption{
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.slide-right-enter-active, .slide-right-leave-active {
  transition: transform 1s ease;
}

.slide-right-enter-from, .slide-right-leave-to {
  transform: translateX(100%);
}

.caption-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

</style>